<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 用户名：文本框，性别：单选 爱好：复选，班级：下拉，个人简介：文本域 -->
    用户名：<input type="text" name="" id="username" /><br />
    性 别：男<input type="radio" value="男" name="sex" />女<input
      type="radio"
      value="女"
      name="sex"
    />未知<input type="radio" name="sex" value="未知" /><br />
    爱 好：<input type="checkbox" name="like" id="" />电影
    <input type="checkbox" name="like" id="" />唱
    <input type="checkbox" name="like" id="" />跳
    <input type="checkbox" name="like" id="" />rap
    <br />
    个人简介：<textarea name="" id="jianjie" cols="30" rows="10"></textarea>
    <button id="btn">添加</button>
    <table border="1" style="width: 500px">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>爱好</th>
          <th>个人简介</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- <table border="1" style="width: 500px">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table> -->
  </body>
  <script>
    var num = 0
    window.onload = function () {
      btn.onclick = function () {
        /**
         * 第二题
         */
        //用户名
        var username = document.getElementById('username').value
        //性别
        var sex = document.getElementsByName('sex'),
          sexVal = '未知'
        for (var i = 0; i < sex.length; i++) {
          if (sex[i].checked) {
            sexVal = sex[i].value
          }
        }
        //爱好
        var like = document.getElementsByName('like'),
          likeVal = ''
        for (var i = 0; i < like.length; i++) {
          if (like[i].checked) {
            likeVal += like[i].nextSibling.nodeValue.trim() + '、'
          }
        }
        //简介
        var jianjie = document.getElementById('jianjie').value
        //添加到表格中
        var trObj = document.createElement('tr'),
          tdObj1 = document.createElement('td'),
          tdObj2 = document.createElement('td'),
          tdObj3 = document.createElement('td'),
          tdObj4 = document.createElement('td')
        tdObj1.innerHTML = username
        tdObj2.innerHTML = sexVal
        tdObj3.innerHTML = likeVal
        tdObj4.innerHTML = jianjie
        trObj.appendChild(tdObj1)
        trObj.appendChild(tdObj2)
        trObj.appendChild(tdObj3)
        trObj.appendChild(tdObj4)
        document.getElementsByTagName('tbody')[0].appendChild(trObj)
        /*第一题*/
        // var trObj = document.createElement('tr'),
        //   tdObj1 = document.createElement('td'),
        //   tdObj2 = document.createElement('td'),
        //   tdObj3 = document.createElement('td'),
        //   tdObj4 = document.createElement('td'),
        //   delBtn = document.createElement('button')
        // delBtn.innerHTML = '删除'
        // delBtn.onclick = function () {
        //   this.parentNode.parentNode.parentNode.removeChild(
        //     this.parentNode.parentNode
        //   ) //通过找到父级的父级的父级 去删除当前的父级的父级
        // }
        // tdObj1.innerHTML = '张三' + num++
        // tdObj2.innerHTML = '19'
        // tdObj3.innerHTML = '女'
        // tdObj4.appendChild(delBtn)
        // trObj.appendChild(tdObj1)
        // trObj.appendChild(tdObj2)
        // trObj.appendChild(tdObj3)
        // trObj.appendChild(tdObj4)
        // document.getElementsByTagName('tbody')[0].appendChild(trObj)
      }
    }
  </script>
</html>
